<template>
  <div class="radar-echart" ref="myDiv">

  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import { TitleComponent, LegendComponent } from 'echarts/components';
import { RadarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([TitleComponent, LegendComponent, RadarChart, CanvasRenderer]);
export default {
  // 组件名称
  name: '',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {

    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () { },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () {
    var chartDom = echarts.init(this.$refs.myDiv)
    chartDom.setOption({
      title: {
        text: '个人能力雷达图'
      },
      legend: {
        data: ['张三', '李四']
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: '工作效率', max: 100 },
          { name: '考勤', max: 100 },
          { name: '积极性', max: 100 },
          { name: '帮助同事', max: 100 },
          { name: '自主学习', max: 100 },
          { name: '正确率', max: 100 }
        ]
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          data: [
            {
              value: [20, 80, 90, 10, 100, 50],
              name: '张三'
            },
            {
              value: [50, 50, 50, 50, 50, 50],
              name: '李四'
            }
          ]
        }
      ]
    })
  },
  // 组件方法
  methods: {}
}
</script>

<style scoped lang="less">
.radar-echart {
  width: 600px;
  height: 400px;
}
</style>
